<!--
/**
* Author: KSJ
* Date: 2022-07-22 18:00
* Desc: 
*/
-->
<!-- by your name -->
<template>
  <filmDetailSkeleton v-if="loading"></filmDetailSkeleton>
  <view class="pageBgColor film-msg-detail" v-else>
    <view class="main">
      <!-- #ifdef MP-WEIXIN  -->
      <yy-navbar :border="false" :placeholder="false" left-icon-color="#fff" bg-color="transparent" @left-click="backClick" :auto-back="false"></yy-navbar>
      <!-- #endif -->
      <view class="bg-img">
        <zm-image :src="filmInfo.cover" custom-style="width:750rpx;height:548rpx"></zm-image>
        <view class="play-btn" @click="play" v-if="filmInfo.trailer">
          <zm-image src="/play.png" is-join custom-style="width:100rpx;height:100rpx;"></zm-image>
        </view>
      </view>
      <view class="bc-white film-model">
        <view class="flex flex-bottom mb30">
          <view class="film-name fs34 fb">{{ filmInfo.filmName }}</view>
          <view class="flex flex-m flex-right" v-if="filmInfo.score"
            ><zm-image src="/collect.png" is-join custom-style="width:25rpx;height:25rpx;margin-right:10rpx;"></zm-image
            ><view class="fc-yellow">{{ parseFloat(filmInfo.score) }}分</view>
          </view>
          <view class="flex fb fc-yellow flex-m flex-right" v-else>
            <zm-image src="/love.png" custom-style="width:28rpx;height:25rpx;margin-right:10rpx;" is-join></zm-image>
            {{ num }}
          </view>
        </view>
        <view class="flex mb40">
          <view class="film-msg flex-1" v-if="filmInfo.duration">
            <view class="label fs20 mb5">片长</view>
            <view class="content fs24">{{ filmInfo.duration }}分钟</view>
          </view>
          <view class="film-msg flex-1" v-if="filmInfo.language">
            <view class="label fs20 mb5">语言</view>
            <view class="content fs24">{{ filmInfo.language }}</view>
          </view>
          <view class="film-msg flex-1" v-if="filmInfo.type">
            <view class="label fs20 mb5">类型</view>
            <view class="content fs24 ell pr10">{{ filmInfo.type }}</view>
          </view>
          <view class="film-msg flex-1" v-if="filmInfo.publishDate">
            <view class="label fs20 mb5">上映时间</view>
            <view class="content fs24">{{ filmInfo.publishDate }}</view>
          </view>
        </view>
        <!-- 剧照 -->
        <view class="film-stills mb40" v-if="filmInfo.stills.length > 0">
          <view class="flex flex-m mb25">
            <view class="fs32 fb">剧照</view>
            <view @click="lookAllStills" class="flex-right flex fc8 flex-m">全部({{ filmInfo.stills.length }}) </view><u-icon name="arrow-right" color="#888"></u-icon
          ></view>
          <scroll-view scroll-x="true" class="flex film-stills-scroll">
            <view v-for="(item, index) in filmInfo.stills" :key="index" class="mr20 film-still-item">
              <zm-image @click="look(index)" width="230rpx" height="160rpx" :src="item"></zm-image>
            </view>
          </scroll-view>
        </view>
        <!-- 演职人员 -->
        <view class="mb40">
          <view class="fs32 fb mb25">演职人员</view>
          <view class="flex fs24 flex-m fc8 mb10"> 导演：{{ filmInfo.director || '暂无' }} </view>
          <view class="flex fs24 flex-m fc8 lh46"> 主演：{{ filmInfo.cast || '暂无' }} </view>
        </view>
        <!-- 简介 -->
        <view v-if="filmInfo.simpleWord">
          <view class="fs32 fb mb25">简介</view>
          <view class="fc8 fs26 lh46">{{ filmInfo.simpleWord }}</view>
        </view>
      </view>
      <film-video v-if="videoShow" :src="filmInfo.trailer" :autoplay="videoShow" @close="closeVideo"></film-video>
    </view>
    <view @click="goSelectFilm" v-if="query.preSaleFlag != '2'" class="btn bc-primary">立即购票</view>
  </view>
</template>

<script>
  import filmDetailSkeleton from './components/filmDetailSkeleton'
  import ZmImage from '@/commons/ZmImage'
  import FilmVideo from './components/FilmVideo'
  import sharePage from '@/mixins/sharePage'
  export default {
    name: '',
    components: {
      ZmImage,
      FilmVideo,
      filmDetailSkeleton
    },
    mixins: [sharePage],
    computed: {
      num() {
        if (this.wantView > 10000) {
          return parseFloat(+(this.filmInfo.wantView / 10000).toFixed(2)) + 'w+'
        } else {
          return parseFloat((+this.filmInfo.wantView).toFixed(2))
        }
      }
    },
    data() {
      return {
        commission: '',
        query: {},
        filmInfo: {
          castList: [], // 演员详细列表
          directorList: [], // 导演详细列表
          trailerList: [],
          stills: [] // 剧照
        },
        loading: true,
        videoShow: false,
        shareInfo: {},
        show: false,
        activityList: [],
        visible: false,
        options: {} // 宣发分享参数配置
      }
    },

    onLoad(options) {
      this.query = options
      this.init()
    },
    mounted() {
      //  #ifdef H5
      // this.backInit()
      // #endif
    },
    methods: {
      //初始化方法
      init() {
        this.getFilmInfo()
      },
      // backInit() {
      //   console.log('注册')
      //   window.history.pushState(null, null, '11')
      //   window.addEventListener('popstate', this.onBack, false)
      // },
      // desttroyeBack() {
      //   window.removeEventListener('popstate', this.onBack, false)
      // },
      // onBack() {
      //   this.$msg
      //     .showModal({
      //       content: '返回后，您当前选中的座位将不再保留',
      //       cancelText: '取消',
      //       confirmText: '确定'
      //     })
      //     .then(() => {
      //       console.log('确定')
      //       this.desttroyeBack()
      //       window.history.go(-1)
      //     })
      //     .catch(() => {
      //       window.history.pushState(null, null, '555')
      //       console.log('取消')
      //     })
      // },
      backClick() {
        this.$tools.navigateTo(-1)
      },
      lookAllStills() {
        uni.setStorageSync('stills', this.filmInfo.stills)
        this.$tools.navigateTo(`/subPages/stills/stills`)
      },
      look(index) {
        this.$tools.previewImage(index, this.filmInfo.stills)
      },
      getFilmInfo() {
        const query = this.query
        uni.$api.film.getFilmInfo(query).then((res) => {
          this.filmInfo = res
          setTimeout(() => {
            this.loading = false
          }, 300)
        })
      },
      play() {
        this.videoShow = true
      },
      closeVideo() {
        this.videoShow = false
      },
      goSelectFilm() {
        const isSingle = this.$auth.getSingleModel()
        const e = this.filmInfo
        if (isSingle) {
          // 多影城到影院选择
          const query = this.$utils.encode({
            filmCode: e.filmCode,
            filmName: e.filmName
          })
          this.$tools.navigateTo(`/subPages/selectFilm/selectFilm?query=${query}`)
        } else {
          // 单影城排期页面
          this.$tools.navigateTo(`/subPages/selectCinema/selectCinema`, {
            cinemaId: this.$auth.getLocBaseSet().cinemaId,
            filmCode: e.filmCode,
            planDate: this.$utils.dateFmt(new Date())
          })
        }
      }
    }
  }
</script>
<style lang="scss" scoped>
  .film-msg-detail {
    height: 100vh;
    box-sizing: border-box;
    padding-bottom: 60rpx;
    overflow-y: auto;
    // display: flex;
    // flex-direction: column;
  }
  .main {
    height: 100vh;
    overflow-y: scroll;
  }
  .bg-img {
    height: 548rpx;
    position: relative;
    z-index: 10;
    &::after {
      position: absolute;
      content: '';
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 5;
      background: rgba($color: #000000, $alpha: 0.4);
    }
    .play-btn {
      position: absolute;
      left: 50%;
      top: 50%;
      margin-left: -50rpx;
      margin-top: -10rpx;
      z-index: 10;
    }
  }
  .film-model {
    min-height: calc(100vh - 650rpx);
    position: relative;
    margin-top: -60rpx;
    width: 100%;
    border-radius: 30rpx 30rpx 0 0;
    // min-height: 200rpx;
    z-index: 20;
    padding: 30rpx;
    box-sizing: border-box;
    margin-bottom: 36rpx;
  }
  .film-msg {
    .label {
      color: #888;
    }
    .content {
      color: #333;
      box-sizing: border-box;
    }
  }

  .film-stills-scroll {
    width: 100%;
    white-space: nowrap;
    .film-still-item {
      width: 230rpx;
      height: 160rpx;
      display: inline-block;
    }
  }
  .btn {
    height: 100rpx;
    border-radius: 20rpx;
    z-index: 100;
    font-size: 36rpx;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    left: 30rpx;
    right: 30rpx;
    bottom: 30rpx;
  }
</style>
